<template>
	<!-- 兑换订单页面 -->
	<view class="redeem">
		<scroll-view scroll-x="true" class="wasteScroll" :scroll-into-view="scrollIntoIndex">
			<view class="slider" v-for="(item,index) in topbar" :key="index" @tap="changTab(index)" :id="'top'+index">
				<text :class='tabbarIndex===index?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topbar: [ //顶部滑块的文字内容
					{
						id: 0,
						name: "待发货"
					},
					{
						id: 1,
						name: "待收货"
					},
					{
						id: 1,
						name: "已完成"
					}
				],
				tabbarIndex: 0, //选中的索引
				scrollIntoIndex: "top0", //顶栏跟随的索引id
			};
		},
		onLoad(e) {
			this.tabbarIndex = parseInt(e.tabbarIndex)
			this.scrollIntoIndex = "top"+this.tabbarIndex
		},
		methods:{
			changTab(e) { //点击头部滑块切换
				// console.log(e)
				if (this.tabbarIndex === e) { //当前页
					return;
				}
				this.tabbarIndex = e
				this.scrollIntoIndex = "top" + e
			},
		}
	}
</script>

<style lang="scss" scoped>
.redeem{
	// 顶部滑块
	.wasteScroll {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
		background: #fff;
	
		// box-shadow: #e3e3e3 0 0 8px;
		.slider {
			box-sizing: border-box;
			display: inline-block;
			// border: 1px solid #000;
			width: 33%;
			text-align: center;
			padding: 20rpx 30rpx;
			font-size: 32rpx;
		}
	
		.f-active-color {
			box-sizing: border-box;
			padding: 10rpx 0;
			border-bottom: 6rpx solid #4fc3a5;
			color: #4fc3a5;
		}
	
		.f-color {
			// color: #ccc;
		}
	
		// .scrollItem-left{
		// 	height:100%;
		// }
	}
}
</style>
